<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
    width="200px"
  >
    <el-tab-pane label="成绩分析" name="first">
      成绩分析
    </el-tab-pane>
    <el-tab-pane label="网上资源" name="second">
      网上资源
    </el-tab-pane>
    <el-tab-pane label="知识点" name="third"></el-tab-pane>
    <el-tab-pane label="题库" name="fourth"></el-tab-pane>
    
    <el-tab-pane label="行为记录" name="fifth" style="height: 1000px;">
      <div style="display: flex;">
        <behavior_attendance style="margin-right: 100px;"></behavior_attendance>
        <Practice></Practice>
    </div>
    <div>
      <Active></Active>
    </div>
    <div style="display: flex;">
      <Facus></Facus>
      <Eyesight></Eyesight>
      <Emotion></Emotion>
    </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ref } from 'vue';
import behavior_attendance from '../../../components/behavior/behavior_attendance.vue'
import Practice from '../../../components/behavior/practice.vue'
import Active from '../../../components/behavior/Active.vue';
import Facus from '../../../components/behavior/Facus.vue'
import Eyesight from '../../../components/behavior/Eyesight.vue'
import Emotion from '../../../components/behavior/Emotion.vue';
const activeName = ref('first');
export default{
components:{
    behavior_attendance,
    Practice,
    Active,
    Facus,
    Eyesight,
    Emotion
}
}
</script>

  <style>
    /* 设置标签的底色为浅橙色 */
    .el-tabs__item {
      background-color: #F0DECD;
      border-radius: 10px 10px 0 0; /* 左上角和右上角为圆角 */

      padding: 30px; /* 增加 el-tab-pane 的内边距 */
      margin: 15px; /* 增加 el-tab-pane 之间的外边距 */
      font-size: 20px;
    }

    /* 设置点击后标签的底色为亮橙色 */
    .el-tabs__item.is-active {
      background-color: #FDCB9E;
      color: black;
    }

    /* 所有标签水平方向均匀平铺 */
    .el-tabs__nav {
      justify-content: space-around;
    }
    .el-tabs--card>.el-tabs__header {
    border-bottom: 5px dashed #BBBBBB ;
    height: 100px;
}
.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: 5px dashed #BBBBBB ;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
}

  </style>